import { Nodes } from '@knno/dom';
import { JSXProps, h, fragment } from '@knno/dom/jsx';
import { AttrCheck, isStr, jsxBuild } from '@knno/ui/jsx/utils';
import { Button } from '@knno/ui/jsx/button';
import SVGMail from '@mdi/svg/svg/mail.svg';

export interface TestNode extends Nodes {
	testAni: () => void;
}

interface TestProp extends JSXProps<TestNode> {
	test: string;
}

export function TestComponent(props: TestProp) {
	const nodes = (
		<>
			<div class={props.class} style={props.style}>
				{props.test}
			</div>
			<div>sss</div>
		</>
	) as TestNode;
	nodes.testAni = () => {
		console.log('do ani');
	};
	if (props.ref) {
		nodes.ref(props.ref);
	}
	return nodes;
}

export class Test1 extends Nodes {
	constructor() {
		super(
			<div>
				class node:{' '}
				<Button icon={SVGMail} iconPos="top">
					发邮件
				</Button>
			</div>
		);
	}

	p1(value?: string): this | string {
		if (value) {
			this.query(':scope span').text(value);
			return this;
		} else {
			return this.query(':scope span').text();
		}
	}

	testMethod() {
		console.log('testMethod invoke');
	}
}

interface Test1Props extends JSXProps<Test1> {
	p1?: string;
}

const ATTRS: AttrCheck = {
	p1: isStr,
};

export function Test(props: Test1Props, children: Nodes[]): Test1 {
	return jsxBuild(new Test1(), props, children, ATTRS);
}
